// 导入动画库
import { trigger, state, transition, style, animate, group } from '@angular/animations';

export const slideToRight = trigger('routeAnim', [
    // 不存在的时候
    state('void', style({ 'position': 'fixed', 'width': '100%', 'height': '80%' })),
    // 其他所有状态
    state('*', style({ 'position': 'fixed', 'width': '100%', 'height': '80%' })),
    // 进场动画
    transition(':enter', [
        // 动画起始状态
        style({ transform: 'translateX(-100%)', opacity: 0 }),
        // 动画结束状态有两动画 可以使用 group的方式
        group([
            animate('0.5s ease-in-out', style({ transform: 'translateX(0)' })),
            animate('0.3s ease-in', style({ opacity: 1 })),
        ])
    ]),
    // 离场动画
    transition(':leave', [
        // 动画起始状态
        style({ transform: 'translateX(0%)', opacity: 1 }),
        // 动画结束状态
        // animate('0.5s ease-in-out', style({ transform: 'translateX(100%)' }))
        group([
            animate('0.5s ease-in-out', style({ transform: 'translateX(100%)' })),
            animate('0.3s ease-in', style({ opacity: 0 })),
        ])
    ])
]);
